<script setup lang="ts">
import html2canvas from 'html2canvas'
import { useRoute } from 'vue-router'
import DictTag from '@/components/DictTag/index.vue'
import { useDict } from '@/utils/dict'
import type { Student, StudentEducationInfo, StudentFamilyInfo, StudentScoreInfo } from '@/types/user'
import { parseTime } from '@/utils/ruoyi'
import exportPDF from '@/utils/exportPDF'

defineProps<
    {
      student?:
      Student &
      StudentScoreInfo &
      { familyMembers?: StudentFamilyInfo[]; educationalExperience?: StudentEducationInfo[] }
    }
>()
const route = useRoute()
const schoolName = route.query.name

async function handleExport() {
  const promiseList = []
  for (const element of document.querySelectorAll<HTMLElement>('.pdf-page').values()) {
    promiseList.push(
      html2canvas(element, { logging: false, scale: window.devicePixelRatio * 3 }),
    )
  }
  exportPDF(await Promise.all(promiseList), 'p', 'cm', [21.0, 29.7])
}

defineExpose({ onExport: handleExport })

const {
  sys_user_sex,
  student_nation,
  student_political,
} = useDict(
  'sys_user_sex',
  'student_disciplines',
  'student_nation',
  'student_political',
  'student_language',
)
</script>

<template>
  <div class="flex">
    <div class="pdf-page">
      <div class="info-title">
        附件6
        <p>贵州省普通高等学校优秀毕业生推荐登记表</p>
      </div>
      <div class="info-title">
        学校名称：{{ schoolName || '' }}
      </div>
      <div class="word-table page1">
        <div class="table-label">
          姓名
        </div>
        <div class="table-content table-col-2">
          {{ student?.studentName }}
        </div>
        <div class="table-label">
          性别
        </div>
        <div class="table-content">
          <DictTag :options="sys_user_sex" :value="student?.sex" type="text" />
        </div>
        <div class="table-label">
          民族
        </div>
        <div class="table-content">
          <DictTag :options="student_nation" :value="student?.studentNation" type="text" />
        </div>
        <div class="table-content">
          出生日期
        </div>
        <div class="table-content table-col-2">
          {{ parseTime(student?.birthday || '', '{y}.{m}') }}
        </div>
        <div class="table-content table-col-2 table-row-3">
          <span style="width: 3em">
            一寸免冠相片(彩色)
          </span>
        </div>
        <div class="table-label">
          院系名称
        </div>
        <div class="table-content table-col-2">
          {{ student?.studentCollege }}
        </div>
        <div class="table-label">
          专业名称
        </div>
        <div class="table-content table-col-3">
          {{ student?.studentMajor }}
        </div>
        <div class="table-label">
          所在年级
        </div>
        <div class="table-content table-col-2">
          {{ student?.studentGrade }}级
        </div>
        <div class="table-label">
          所任职务
        </div>
        <div class="table-content table-col-2">
          {{ student?.positionHeld }}
        </div>
        <div class="table-label">
          任职时间
        </div>
        <div class="table-content table-col-3">
          {{ student?.tenureDuration }}
        </div>
        <div class="table-label">
          政治面貌
        </div>
        <div class="table-content table-col-2">
          <DictTag :options="student_political" :value="student?.studentPolitical" />
        </div>
        <div class="table-label">
          学年学习情况
        </div>
        <div class="table-label table-col-2">
          综合测评成绩
        </div>
        <div class="table-content">
          {{ student?.overallAssessmentScore }}
        </div>
        <div class="table-label table-col-2">
          班级（或同年级同专业）排名
        </div>
        <div class="table-content table-col-2">
          {{ student?.classRank }}
        </div>
        <div class="table-label table-col-2">
          班级（或同年级同专业）人数
        </div>
        <div class="table-content table-col-2">
          {{ student?.classSize }}
        </div>
        <div class="table-label">
          何时获得何种奖励
        </div>
        <div class="table-content table-col-11">
          {{ student?.rewardAcquisitionDate }}
        </div>
        <div class="table-label">
          主要事迹
        </div>
        <div class="table-content table-col-11">
          {{ student?.keyAchievements }}
        </div>
        <div class="table-content table-col-12" style="padding-right: 4em">
          本人承诺以上信息和内容属实、有效，如有虚假愿承担相应责任。学生签名:
        </div>
      </div>
    </div>
    <div class="pdf-page">
      <div class="word-table page2">
        <div class="table-label">
          <span v-for="(i, index) in '班级推荐意见'" :key="index">{{ i }}</span>
        </div>
        <div class="table-content info-recommend">
          <div class="bottom-line">
            <div class="left">
              辅导员或班主任签名：
            </div>
            <div class="right">
              <div class="time">
                <span>年</span>
                <span>月</span>
                <span>日</span>
              </div>
            </div>
          </div>
        </div>
        <div class="table-label">
          <span>院</span>
          <span style="display: flex;width: 1em;height: 1em;transform: rotate(90deg)">（</span>
          <span>系</span>
          <span style="display: flex;width: 1em;height: 1em;transform: rotate(90deg)">）</span>
          <span v-for="(i, index) in '评选意见'" :key="index">{{ i }}</span>
        </div>
        <div class="table-content info-recommend">
          <div class="bottom-line">
            <div class="left">
              院（系）领导签名：
            </div>
            <div class="right">
              <div class="sign">
                <span>（公</span>
                <span>章）</span>
              </div>
              <div class="time">
                <span>年</span>
                <span>月</span>
                <span>日</span>
              </div>
            </div>
          </div>
        </div>
        <div class="table-label">
          <span v-for="(i, index) in '学校初审意见'" :key="index">{{ i }}</span>
        </div>
        <div class="table-content info-recommend">
          <div class="bottom-line">
            <div class="left" />
            <div class="right">
              <div class="sign">
                <span>（公</span>
                <span>章）</span>
              </div>
              <div class="time">
                <span>年</span>
                <span>月</span>
                <span>日</span>
              </div>
            </div>
          </div>
        </div>
        <div class="table-label">
          <span v-for="(i, index) in '省教育厅意见'" :key="index">{{ i }}</span>
        </div>
        <div class="table-content info-recommend">
          <div class="bottom-line">
            <div class="left" />
            <div class="right">
              <div class="sign" style="width: fit-content;">
                <span>（省教育厅公章）</span>
              </div>
              <div class="time">
                <span>年</span>
                <span>月</span>
                <span>日</span>
              </div>
            </div>
          </div>
        </div>
        <div class="table-label">
          <span v-for="(i, index) in '备注'" :key="index">{{ i }}</span>
        </div>
        <div class="table-content" />
      </div>
      <div class="info-footer">
        注：此表装入学生档案。
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
@import "../../../../assets/styles/word-table";

@font-face {
  font-family: '仿宋_GB2312';
  src: url("@/assets/fonts/仿宋_GB2312.ttf");
}
.pdf-page {
  background: white;
  width: 210mm;
  height: 297mm;
  padding: 12.7mm;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  flex-grow: 0;
}

.word-table {
  flex: 1;
  height: 0;
  width: 100%;
}

.page1 {
  grid-template-columns: 3em 4em 4em 3em 3em 3em 3em 3em 4em 4em 1fr 1fr;
  grid-template-rows: 3em 3em 3em 4em 1fr 2fr 3em;

  & > * {
    grid-column-start: span 1;
    grid-row-start: span 1;
  }
}

.page2 {
  grid-template-columns: 3em 1fr;
  grid-template-rows: repeat(4, 1fr) 4em;

  .table-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}

.info-recommend {
  display: flex;
  width: 100%;
  height: 100%;

  justify-content: space-between;

  .bottom-line {
    align-self: flex-end;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 0 2em 3em 2em;

    .right {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-direction: column;
      .sign {
        width: 6em;
        padding: 0 0 2em 0;
        display: flex;
        justify-content: space-between;
      }

      .time {
        display: flex;
        width: 8em;
        justify-content: space-between;
      }
    }
  }
}

.info-title {
  font-size: 12pt;
  font-family: '仿宋_GB2312', serif;
  justify-content: space-between;
  margin: 1em 0;
  p{
    font-size: 18pt;
    font-weight: bold;
    font-family: '仿宋_GB2312', serif;
    display: flex;
    justify-content: center;
    margin: .5em 0;
  }
}

.info-footer {
  font-size: 12pt;
  font-family: '仿宋_GB2312', serif;
  display: flex;
  justify-content: space-between;
  margin: .5em 0;
}
</style>
